<template>
    <table class="my-table">
      <thead>
        <tr class="table_th">
            <th>排名</th>
          <th>城市</th>
          <th>{{  mapInd == 1 ? "销售面积" : mapInd == 2 ? "销售金额" : "价格指数" }}</th>
          <th>同比增长率</th>
          <th>环比增长率</th>
        </tr>
      </thead>
      <tbody>
        <vue3-seamless-scroll
          openWatch="true"
          :list="tableData"
          direction="up"
          :hover="true"
          :limitScrollNum="tableData.length"
          :step="step"
          class="seamless-warp"
        >
          <tr class="table_td" v-for="(item, index) in tableData" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.regionName }}</td>
            <td>
                {{ item.yoy }}
            </td>
            <td >
                {{ item.chain }}
            </td>
          </tr>
        </vue3-seamless-scroll>
      </tbody>
    </table>
  </template>
  
  <script setup lang="ts">
  import { ref, watchEffect, onMounted, onUnmounted } from "vue";
  import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
  import { pxToRem } from "@/utils/index";
  // 接收参数
  const mapInd = ref(0);
  const tableData = ref<any>([]);
  const step = ref(0);
  
  const props = defineProps({
    housingSupplyStatsData: {
      type: Object,
      default: () => {},
    },
    mapInd: {
      type: Number,
      required: true,
    },
  });
  
  // 监听索引变化
  watchEffect(() => {
    mapInd.value = props.mapInd;
    tableData.value = [];
    tableData.value = props.housingSupplyStatsData.list[mapInd.value];
  });
  const calculateStep = () => {
    // 获取视口的高度
    const viewportHeight = window.innerHeight;
    if (tableData.value.length > 5) {
      step.value = viewportHeight * 0.0003;
    }
  };
  onMounted(() => {
    calculateStep();
    window.addEventListener("resize", calculateStep);
  });
  onUnmounted(() => {
    window.removeEventListener("resize", calculateStep);
  });
  </script>
  
  <style lang="less" scoped>
  .my-table {
    position: relative;
  }
  .table_th {
    width: 587px;
    height: 33px;
    background: linear-gradient(180deg, #2586ee 0%, rgba(37, 134, 238, 0.6) 100%);
    position: absolute;
    z-index: 1;
    display: flex;
    color: #fff;
    align-items: center;
    font-size: 14px;
  }
  .table_th th:nth-child(1) {
    flex: 3; /* 宽度比例为1 */
  }
  
  .table_th th:nth-child(2),
  .table_th th:nth-child(3) {
    flex: 4; /* 宽度比例为2 */
  }
  .table_td {
    display: flex;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    height: 30px;
    align-items: center;
    background: #092140;
  }
  .table_td td:nth-child(1) {
    text-align: center;
    flex: 3; /* 宽度比例为1 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .table_td td:nth-child(2),
  .table_td td:nth-child(3) {
    text-align: center;
    flex: 4; /* 宽度比例为2 */
  }
  .seamless-warp {
    height: 150px;
    overflow: hidden;
    margin-top: 30px;
  }
  .seamless-warp .table_td:nth-child(2n) {
    background: rgba(0, 0, 0, 0);
  }
  .seamless-warp .table_td:nth-last-child(1) {
    background: rgba(0, 0, 0, 0);
  }
  .cl-5c {
    color: #5cc40c;
  }
  .cl-c4 {
    color: #c41e0c;
  }
  </style>
  